<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no" />
        <title>供品管理</title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
        <link rel="stylesheet" type="text/css"  href="../../css/mui.min.css">
        <link rel="stylesheet" type="text/css" href="../../css/common.css" />
        <style>
            body{
                font-size: 14px;
            }
            footer.aui-nav{
                z-index: 99999;
            }
            header.aui-bar{
                background: #fff;
                position: fixed;
            }
            .contain{
            }
            .aui-title{
                color:#000;
            }
            .aui-nav .aui-bar-tab .active .aui-iconfont, .aui-nav .aui-bar-tab .active p{
                color:#327afa !important;
            }
            .active{
                color:#327afa !important;
            }
            .aui-tab-nav li.active {
                color: #327afa;
                border-bottom: 2px #327afa solid;
            }
            .aui-bar .aui-iconfont{
                color:#000;
            }
            .send{
                font-size: 12px !important;
            }
            .aui-img-object{
                max-width: 40px;
                height: 40px;
                line-height: 40px;
                margin-right: 10px;
            }
            .aui-img-body{
                width: 62%;
                float: left;
            }
            .addInfo{
                font-size: 12px;
            }
            .status{
                /*height: 40px;
                line-height: 40px;*/
            }
            .aui-ellipsis-1{
                padding: 0;
            }
            .mui-btn-red{
                background: #ff3333;
            }
            .spanStatus{
                display: block;
                border-radius: 4px;
                padding:4px;
                height: 20px;
                line-height: 20px;
                box-sizing:content-box;
                margin-top: 8px;
            }
            .receive{
                background: #327afa;
                color:#fff;

            }
            .mui-table-view-cell:after,.mui-table-view:before,.mui-table-view:after{
                height: inherit;
                background-color:transparent;
                left: 0;
            }
            .mui-table-view-cell:after{
                bottom: -100%;
            }
            .mui-table-view-cell:last-child:after, .mui-table-view-cell:last-child:before{
                height: inherit;
            }
            .price{
                display: block;
                
            }
            .mui-table-view-cell{
                padding: 0;
            }
            .mui-table-view-cell>.mui-slider-handle{
                padding: 5px 15px;
                overflow: hidden;
            }
            .price em{
                color: #ff0005;
                margin-right: 3px;
            }
            .handle{
                width: 100%;
                background: #e6e6e6;
                overflow: hidden;
                padding: 10px 0;
                display: none;
            }
            .handle span{
                display: block;
                width: 33%;
                float: left;
                text-align: center;
            }
            .fold:before{
                content:"\e6de" !important;
            }
            .content2,.content3{
                display: none;
            }
            .content3 .handle span:first-of-type(){
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <div class="contain">
            <ul class=" mui-table-view friendList content1">
                <li class="mui-table-view-cell mui-media aui-border-b">
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo"><span class="price"><em>￥46.66元</em>/米</span></p>
                        </div>
                        <div class="status aui-pull-right" tapmode onclick="showHandle(this)">
                            <span class="aui-iconfont aui-icon-unfold spanStatus"></span>
                        </div>
                    </div>
                    <div class="handle">
                        <span>下架</span>
                        <span>删除</span>
                        <span>修改</span>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">待上架介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo"><span class="price"><em>￥46.66元</em>/米</span></p>
                        </div>
                        <div class="status aui-pull-right" tapmode onclick="showHandle(this)">
                            <span class="aui-iconfont aui-icon-unfold spanStatus"></span>
                        </div>
                    </div>
                    <div class="handle">
                        <span>下架</span>
                        <span>删除</span>
                        <span>修改</span>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo"><span class="price"><em>￥46.66元</em>/米</span></p>
                        </div>
                        <div class="status aui-pull-right" tapmode onclick="showHandle(this)">
                            <span class="aui-iconfont aui-icon-unfold spanStatus"></span>
                        </div>
                    </div>
                    <div class="handle">
                        <span>下架</span>
                        <span>删除</span>
                        <span>修改</span>
                    </div>
                </li>
            </ul>
            <ul class=" mui-table-view friendList content2">
                <li class="mui-table-view-cell mui-media aui-border-b">
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo"><span class="price"><em>￥46.66元</em>/米</span></p>
                        </div>
                        <div class="status aui-pull-right" tapmode onclick="showHandle(this)">
                            <span class="aui-iconfont aui-icon-unfold spanStatus"></span>
                        </div>
                    </div>
                    <div class="handle">
                        <span>下架</span>
                        <span>删除</span>
                        <span>修改</span>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo"><span class="price"><em>￥46.66元</em>/米</span></p>
                        </div>
                        <div class="status aui-pull-right" tapmode onclick="showHandle(this)">
                            <span class="aui-iconfont aui-icon-unfold spanStatus"></span>
                        </div>
                    </div>
                    <div class="handle">
                        <span>下架</span>
                        <span>删除</span>
                        <span>修改</span>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo"><span class="price"><em>￥46.66元</em>/米</span></p>
                        </div>
                        <div class="status aui-pull-right" tapmode onclick="showHandle(this)">
                            <span class="aui-iconfont aui-icon-unfold spanStatus"></span>
                        </div>
                    </div>
                    <div class="handle">
                        <span>下架</span>
                        <span>删除</span>
                        <span>修改</span>
                    </div>
                </li>
            </ul>
            <ul class=" mui-table-view friendList content3">
                <li class="mui-table-view-cell mui-media aui-border-b">
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo"><span class="price"><em>￥46.66元</em>/米</span></p>
                        </div>
                        <div class="status aui-pull-right" tapmode onclick="showHandle(this)">
                            <span class="aui-iconfont aui-icon-unfold spanStatus"></span>
                        </div>
                    </div>
                    <div class="handle">
                        <span>下架</span>
                        <span>删除</span>
                        <span>修改</span>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo"><span class="price"><em>￥46.66元</em>/米</span></p>
                        </div>
                        <div class="status aui-pull-right" tapmode onclick="showHandle(this)">
                            <span class="aui-iconfont aui-icon-unfold spanStatus"></span>
                        </div>
                    </div>
                    <div class="handle">
                        <span>下架</span>
                        <span>删除</span>
                        <span>修改</span>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo"><span class="price"><em>￥46.66元</em>/米</span></p>
                        </div>
                        <div class="status aui-pull-right" tapmode onclick="showHandle(this)">
                            <span class="aui-iconfont aui-icon-unfold spanStatus"></span>
                        </div>
                    </div>
                    <div class="handle">
                        <span>下架</span>
                        <span>删除</span>
                        <span>修改</span>
                    </div>
                </li>
            </ul>
        </div>
    </body>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../../script/mui.js"></script> 
    <script type="text/javascript">
        var UIInput,inputId,inputValue;
        apiready = function() {
            api.parseTapmode();
            var mobile = api.pageParam.mobile;
            var header = $api.dom('header');
            UIInput = api.require('UIInput');
            //$api.fixStatusBar(header);
            api.setStatusBarStyle({
                  style : 'light'
            });
        }
        // 显示隐藏操作
        function showHandle(obj){
            if($(obj).find("span").hasClass("fold")){
                $(obj).find("span").removeClass("fold");
                $(obj).parents('li').find(".handle").css({"display":"none"})
            }else{
                $(obj).find("span").addClass("fold");
                $(obj).parents('li').find(".handle").css({"display":"block"})
            }
        }
        function test(){
            alert("DDD")
        }
        // 接收来自win的方法
        function showContent(type){
            switch(type){
                case "1":
                    $(".content1").css({"display":"block"});
                    $(".content2").css({"display":"none"});
                    $(".content3").css({"display":"none"});
                break;
                case "2":
                    $(".content1").css({"display":"none"});
                    $(".content2").css({"display":"block"});
                    $(".content3").css({"display":"none"});
                break;
                case "3":
                    $(".content1").css({"display":"none"});
                    $(".content2").css({"display":"none"});
                    $(".content3").css({"display":"block"});
                break;
            }
        }
    </script>
</html>
